<template>
	<view class="t-td" v-if="fixedWidth"  :style="{ 'width':fixedWidth + 'rpx','border-width': thBorder + 'px','border-color':borderColor ,'font-size':fontSize+'px' ,'color':color,'justify-content':tdAlignCpd}" @click="myClick">
		<slot></slot>
	</view>
	<view class="t-td flex-1" v-else :style="{'border-width': thBorder + 'px','border-color':borderColor ,'font-size':fontSize+'px' ,'color':color,'justify-content':tdAlignCpd}" @click="myClick">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			align: String,
			fixedWidth:{
				type:Number
			}
		},
		data() {
			return {
				thBorder: '1',
				borderColor: '#d0dee5',
				fontSize: '14',
				color: '#555c60',
				tdAlign: 'center'
			};
		},
		inject: ['table', 'tr'],

		created() {
			this.thBorder = this.table.border;
			this.borderColor = this.table.borderColor;
			this.fontSize = this.tr.fontSize;
			this.color = this.tr.color;
			if (this.align) {
				this.tdAlign = this.align;
			} else {
				this.tdAlign = this.tr.align
			}
		},
		methods:{
			myClick(e){
				console.log(e)
				this.$emit('click')
			}
		},
		computed: {
			tdAlignCpd() {
				let nameAlign = '';
				switch (this.tdAlign) {
					case 'left':
						nameAlign = 'flex-start'
						break;
					case 'center':
						nameAlign = 'center'
						break;
					case 'right':
						nameAlign = 'flex-end'
						break;
					default:
						nameAlign = 'center'
						break;
				}
				return nameAlign
			}
		}
	};
</script>

<style>
	t-td{
		height: 100%;
	}
	.t-td {
		display: flex;
		align-items: center;
		padding:14rpx;
		text-align: center;
		color: #6F6F6F;
		font-size: 26rpx;
		flex-shrink: 0;
		
	}

	/* #ifndef H5 */
		.t-td{
			border-top: 1px #d0dee5 solid !important;
			border-left: 1px #d0dee5 solid !important;
			align-self: stretch;
		}
	/* #endif */
	/* #ifdef H5 */
	.t-td {
		border-top: 1px #d0dee5 solid !important;
		border-left: 1px #d0dee5 solid !important;
	}
	/* #endif */
	.flex-1{
		flex: 1;
		flex-shrink: 1;
	}
</style>
